<style lang="scss" scoped>
.edit{
    height: 100vh;
    background-color: #f5f5f5;
    .headImg{
        height: 25vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img{
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        span{
            color: rgb(50, 134, 255);
            font-size: 14px;
            margin-top: 10px;
        }
    }
    .message{
        width: 94%;
        box-sizing: border-box;
        padding: 5px 2%;
        height: 60vh;
        border-radius: 7px;
        background-color: #fff;
        margin-left: 3%;
        .title{
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: bold;
        }
        .list{
            min-height: 40px;
            line-height: 40px;
            display: flex;
            padding: 0 2%;
            border-bottom: 1px solid #f5f5f5;
            color: #999;
            font-size: 15px;
            .label{
                width: 20%;
            }
            .detail{
                width: 80%;
                text-align: right;
                position: relative;
                textarea{
                    width: 80%;
                    height: 150px;
                    margin-right: 5px;
                    margin-top: 5px;
                    border: 1px solid #999;
                    border-radius: 7px;
                    line-height: 22px;
                    padding: 5px;
                }
                .numLength{
                    position: absolute;
                    right: 13px;
                    bottom: 10px;
                }
            }
        }
    }
}
.nickInp{
    padding: 10px;
    margin-top: 20px;
}
</style>
<template>
    <div class="edit">
        <navigator 
            :back="true"
            :title="'修改资料'"
            :btnShow="true"
            @click="submit"
            />
        <div class="headImg">
            <img :src="userInfo.headImg" alt="">
            <span @click="editHead()">
                修改头像
            </span>
        </div>

        <div class="message">
            <div class="title">
                常规
            </div>
            <div class="list">
                <div class="label">
                    昵称
                </div>
                <div class="detail">
                    <span @click="nickShow=true">
                        {{ userInfo.nickName }}
                    </span>
                    
                </div>
            </div>
            <div class="list">
                <div class="label">
                    性别
                </div>
                <div class="detail">
                    <span @click="sexShow=true">
                        {{ userInfo.sex == 0 ? '女' : userInfo.sex == 1 ? '男' :'保密' }}
                    </span>
                </div>
            </div>
            
            <div class="list">
                <div class="label">
                    个人简介
                </div>
                <div class="detail">
                    <textarea v-model="userInfo.desction">

                    </textarea>
                    <span class="numLength">
                        {{userInfo.desction.length}}/150
                    </span>
                </div>
            </div>
        </div>
        <!-- 修改昵称的弹出层 -->
        <van-popup 
            v-model="nickShow"
            position="bottom"
            :style="{ height: '30%' }"
            :closeable="true"
            >
            <div class="nickInp">
                <van-cell-group>
                    <van-field 
                    v-model="userInfo.nickName" 
                    label="修改昵称" 
                    placeholder="请输入昵称" />
                </van-cell-group>
            </div>
        </van-popup>
        <!-- 修改性别的弹出层 -->
        <van-popup 
            v-model="sexShow"
            position="bottom"
            :style="{ height: '30%' }"
            :closeable="true"
            >
            <div class="nickInp">
                <h5 style="margin-bottom: 15px;">
                    修改性别
                </h5>
                <van-radio-group v-model="userInfo.sex" direction="horizontal">
                    <van-radio :name="1">男</van-radio>
                    <van-radio :name="0">女</van-radio>
                    <van-radio :name="null">保密</van-radio>
                </van-radio-group>
            </div>
        </van-popup>
    </div>
</template>
<script>
import navigator from '@/components/navigator.vue';
// 引入上传文件的接口
import {
    uploadFile,
    // 引入修改资料接口
    editUser,
    // 引入获取用户信息接口
    getUserInfo
} from '@/api'
export default {
    methods: {
        editHead(){
            // 指定this指向
            let that = this;
            // 创建dom input对象
            let domInput = document.createElement('input');
            // 让创建的type值 修改为file
            domInput.type = 'file';
            // 主动触发domInput的点击行为
            domInput.click();
            // 监听domInput的 改变事件
            domInput.onchange = function (){
                /* 
                    this.files
                        files 选择的文件列表对象
                        里面包含了选择的文件信息
                        {
                            lastModified: 文件最后的修改日期
                            name:  文件名
                            size: 文件大小 单位(by)
                            type: 文件类型 （image都是图片）
                        }
                */
                // console.log(this.files[0]);
                // 判断选择的文件是否是图片
                if(this.files[0].type.indexOf('image') == -1){
                    // vant的轻提示
                    that.$toast('请选择正确的图片类型');
                    return
                }
                // 创建一个表单对象数据
                let data = new FormData();
                // 添加表单数据
                data.append('file',this.files[0])
                // 上传文件
                uploadFile(data).then(res => {
                    console.log(res.data);
                    // 是否上传成功
                    if(res.data.code == 1){
                        // vant的轻提示
                        that.$toast('上传成功');
                        // 把本地的图片地址替换成上传后的地址
                        that.userInfo.headImg = res.data.result.replace(/192.168.17.126/g,'192.168.13.10')
                    }
                })
            }
        },
        submit(){
            // 修改资料接口
            editUser(this.userInfo).then(res => {
                // console.log(res.data);
                if(res.data.code == 1){
                    // 获取用户信息
                    getUserInfo().then(result => {
                        if(result.data.code == 1){
                            this.$toast('保存成功');
                            // 把本地的用户信息更新
                            // localStorage.setItem('userInfo',JSON.stringify(result.data.result))
                            // 更新vuex的
                            this.$store.commit('changeUser',result.data.result)
                            // 延迟退出
                            setTimeout(() => {
                               // 退出当前页面
                                this.$router.back(); 
                            }, 500);
                        }
                    })
                }else{
                    this.$toast(res.data.msg);
                }
            })
        }
    },
    watch: {
        'userInfo.desction'(n){
            // 把前150个字符截取下来 并且重新赋值
            this.userInfo.desction = n.substr(0,150)
        }
    },
    data() {
        // console.log();

        return {
            // 返回的数据信息 userInfo等于 store里面的userInfo
            userInfo: this.$store.state.userInfo,
            // 是否显示修改昵称的弹出层
            nickShow: false,
            // 是否显示修改性别的弹出层
            sexShow: false
        }
    },
    components: {
        navigator
    }
}
</script>